<template>
  <div>
    <h1>app</h1>
    <p>count{{ count }}---number:---{{ number }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const count = ref(100)
const number = ref(200)
const increment = () => {
  count.value++
  number.value++
}

// watch(
//   count,
//   (newVal, oldVal) => {
//     console.log(newVal, oldVal)
//   },
//   {
//     immediate: true // 立即执行
//     // deep: true, // 深度监听
//     // flush: 'pre' // 组件更新前执行
//   }
// )

// 监听多个数据源
watch([count, number], ([newCount, newData], [oldCount, oldData]) => {
  console.log('count', newCount, oldCount)
  console.log('number', newData, oldData)
})
</script>

<style lang="scss" scoped></style>
